﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Lib/Css/site.css" rel="stylesheet" />
    <script src="../Lib/Js/jquery.min.js"></script>
    <script src="../Lib/Js/JSXTransformer.js"></script>
    <script src="../Lib/Js/react.js"></script>
</head>
<body>
    <p>getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取</p>
    <p>this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件</p>
    <div id="d1"></div>
</body>
</html>
<script type="text/jsx">
    var LinkButton = React.createClass({
        getInitialState:function(){
            return {liked:"",sc:""};
        },
        handleClick:function(){
            var span = React.findDOMNode(this.refs._s).className;
            this.setState({liked:"qqq",sc:span});
            var that = this;

            //自动渲染组件
            window.setTimeout(function(){
                that.setState({liked:"abc",sc:"red"});
            },2000);
        },
        render:function(){
            var that = this;
            return (
                <span className='blue' ref='_s' onClick={ function(){ that.handleClick(); }}>
                    you {this.state.liked} this and cls is {this.state.sc};
                </span>
            );
        }
    });

    React.render(
        <LinkButton />,$("#d1").get(0)
    )
</script>
